﻿<!DOCTYPE html>
<html>
	<head>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />

		<link rel="stylesheet" type="text/css" href="css/main.css" />
		<link rel="stylesheet" type="text/css" href="css/ui.css" />
		<link rel="stylesheet" type="text/css" href="css/jq.growl.css" />
		<link rel="stylesheet" type="text/css" href="css/icons/style.css" />

		<script type="text/javascript" src="js/lib/jq.mobi.min.js"></script>
		<script type="text/javascript" src="js/lib/ui.js"></script>
		<script type="text/javascript" src="js/lib/jq.growl.js"></script>
		<script type="text/javascript" src="js/lib/fastclick.min.js"></script>
		<script type="text/javascript" src="js/lib/iscroll-lite.js"></script>
		<script type="text/javascript" src="js/lib/handlebars.js"></script>
		<script type="text/javascript" src="js/templates.js"></script>
		<script type="text/javascript" src="js/app.js"></script>
		<script type="text/javascript" src="js/lib/cordova-2.6.0.js"></script>
	</head>
	<body>
		<script type="text/x-handlebars-template" id="conversationTmpl">
			<header>
				<span class="photo">
					<img class="logo" src="img/unknown.jpg" />
				</span>
				<span class="name">{{name}}</span>
				<span class="number">({{address}})</span>
			</header>
			<div class="messagesWrapper">
				<div class="scrollingDiv" style="padding:15px">	
					{{#each messages}}
						<div class="message">
							{{#if right}}
								<div class="right-bubble">
							{{else}}
								<div class="left-bubble">
							{{/if}}
									<div class="msg-date">{{date}}</div>
									<p>{{message}}</p>
								</div>
						</div>
					{{/each}}
				</div>
			</div>
			<div class="reply-box">
				<button class="btn reply-btn">Reply</button>
				<div class="reply-field-wrapper">
					<textarea class="reply-field"></textarea>
				</div>
			</div>
		</script>
		<script type="text/x-handlebars-template" id="conversationsListTmpl">
			<div class="scrollingDiv">
			{{#each this}}
				<div class="contact" data-address="{{address}}">
					<div class="photo">
						<img src="img/unknown.jpg" />
					</div>
					<div class="info">
						<div class="name">{{name}}</div>
						<div class="phone">({{address}})</div>
					</div>
					<div class="preview">{{previewMsg}}</div>
				</div>
			{{/each}}
			</div>
		</script>
		<div id="UI">
			<div class="splashScreen">
				<div class="logo-wrapper">
					<img src="img/logo2.png" />
				</div>
				<div class="info">
					<a class="info-link" href="#" onclick="$.ui.openExternalLink('http://www.terracom.gr');">&copy 2013 Terracom Informatics</a>
				</div>
			</div>
			<div class="header">
				<a id="backButton" class="btn btn-back icon-arrow-left-3" href="#"></a>
				<div class="dynamic-header">
					<img class="logo" src="img/logo2.png">
				</div>
				<a class="btn btn-right icon-list" href="#" onclick="$.ui.showMenu()"></a>
				<a class="btn btn-right icon-mail" href="#" onclick=""></a>
			</div>
			<div class="content">
				<div class="panel" id="conversationsList">
				</div>
				<div class="panel" id="info">
					INFO
				</div>
				<div class="panel" id="settings">
					<div class="scrollingDiv">
						<input type="checkbox" class="ui-input" id="c1"/>
						<label for="c1">Styled Check Box</label>
						<br />
						<input type="checkbox" class="ui-input" id="c2"/>
						<label for="c2">Styled Check Box</label>
						<br />
						<input type="radio" class="ui-input" id="r1" name="rr"/>
						<label for="r1"><span></span>Styled Radio button</label>
						<br />
						<input type="radio" checked class="ui-input" id="r2" name="rr"/>
						<label for="r2"><span></span>Styled Radio Button</label>
						
					</div>
				</div>
			</div>
			<div id="menu" class="menu">
				<ul>
					<li>
						<a class="menu-link icon-enter" href="#" onclick="app.toggleLoginForm();">Είσοδος</a>
						<div id="loginForm">
							<label for="usernameField">Όνομα χρήστη:</label>
							<input type="text" class="ui-input" id="usernameField" />
							<label for="passwordField">Κωδικός:</label>
							<input type="password" class="ui-input" id="passwordField" />
							<button id="loginButton" class="btn">Είσοδος</button>
						</div>
					</li>
					<li><a class="menu-link icon-signup" onclick="$.ui.openExternalLink('http://www.liveall.eu/user/register');">Εγγραφή</a></li>
					<li><a class="menu-link icon-question" href="#">Υπόλοιπο</a></li>
					<li><a class="menu-link icon-info" href="#" onclick="$.ui.showPanel('#info')">Πληροφορίες</a></li>
					<li><a class="menu-link icon-cog" onclick="$.ui.showPanel('#settings')"href="#">Ρυθμίσεις</a></li>
					<li><a class="menu-link icon-exit" href="#">Αποσύνδεση</a></li>
				</ul>
				<a class="btn btn-close icon-cross" href="#" onclick="$.ui.hideMenu()"></a>
			</div>
		</div>
	</body>
</html>